// 悬浮菜单更改颜色
:global {
  .BasicLayout-ProLayout-Popover-ModelStyle {
    width: 50% !important;
    min-width: 800px !important;
    div.ant-popover-content {
      border-radius: 6px;
      div.ant-popover-arrow {
        border-bottom-color: #3a3a3af2;
        border-left-color: transparent;
      }
      div.ant-popover-inner {
        border-radius: 6px;
        div.ant-popover-inner-content {
          padding-top: 40px;
          background: #373737;
          border-radius: 6px;
        }
      }
    }
  }
  .ant-popover.BasicLayout-ProLayout-Popover-inputSeach.ant-popover-placement-bottom {
    width: calc(50% - 180px) !important;
    min-width: 620px !important;
    div.ant-popover-content {
      div.ant-popover-arrow {
        top: -8.5px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        .ant-popover-arrow-content {
          background-color: #1f1f1f;
        }
      }
      div.ant-popover-inner {
        div.ant-popover-inner-content {
          padding: 0;
          background: #1f1f1f;
        }
      }
    }
  }
}
.loading_warp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: calc(60vh + 40px);
  padding-top: 50px;
}
.appContent {
  font-size: 16px;
  backdrop-filter: blur(10px);
  div[class='inputSeach'] {
    // position: relative;
    // height: 0;
    margin: 0 70px;
    // padding-bottom: 6.6%;
    span[class~='ant-input-group-compact'] {
      // position: absolute;
      // top: 0;
      // left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      [class~='ant-input-affix-wrapper'] {
        height: 100%;
        color: #fff;
        font-size: 16px;
        background: #4b4b4b;
        border: none;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        box-shadow: none;
        backdrop-filter: blur(10px);

        &:hover {
          background-color: none;
          border: none;
        }
        [class='ant-input'] {
          color: #fff;
          background: #4b4b4b;
          box-shadow: none;
          // backdrop-filter: blur(10px);
        }
      }
      [class~='ant-btn-primary'] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 100%;
        background: #18a0fb !important;
        border: none;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        backdrop-filter: blur(10px);
        [class='anticon anticon-search'] {
          svg {
            font-size: 22px;
          }
        }
      }
    }
  }
  [class='app'] {
    height: 60vh;
    overflow: hidden;
    overflow-y: auto;
    [class='titleTip'] {
      margin-top: 24px;
      margin-bottom: 12px;
      margin-left: 70px;
      color: #fff;
      font-weight: 500;
      font-size: 16px;
    }
    [class='appList'] {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(auto-fit, 145px);
      padding: 0 70px;
      [class~='appItem'] {
        position: relative;
        width: 145px;
        height: 86px;
        color: rgb(158, 158, 158);
        border-radius: 6px;
        &:hover {
          color: #fff;
          // background-color: #18a0fb;
          cursor: pointer;
        }
        [data-appitem-wrapper] {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          [class='name'] {
            display: flex;
            align-items: center;
            height: 35%;
            padding-left: 0.8em;
            font-size: 14px;
            background: #ffffff1a;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            backdrop-filter: blur(80px);
          }
          [class='explain'] {
            position: relative;
            height: 65%;
            padding: 7% 7%;
            font-size: 12px;
            background: #0003;
            border-bottom-right-radius: 6px;
            border-bottom-left-radius: 6px;
            [class~='vertical'] {
              display: -webkit-box; // 最关键的因素
              // height: 2.5rem;
              overflow: hidden; //文字超出隐藏
              text-overflow: ellipsis; //文字超出显示省略号
              vertical-align: middle;
              word-break: break-all; //未知
              -webkit-line-clamp: 2; //多少行显示省略号，默认为1，根据实际填写
              -webkit-box-orient: vertical; //未知
            }
          }
        }
      }
      [class~='appItem-action'] {
        color: #fff;
        background-color: #18a0fb;
      }
    }
  }
}

.inputContent {
  display: flex;
  // align-items: center;
  justify-content: center;
  height: 230px;
  color: #fff;
  [class='contentRight'] {
    width: 50%;
    height: 100%;
    padding: 12px 0 12px 16px;
    overflow-y: auto;
    border-right: 1px solid #3a3a3a;
    [class~='nameItem'] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      // &:hover {
      //   background: #18a0fb;
      // }
    }
    [class~='nameItem-action'] {
      background: #18a0fb;
    }
  }
  [class='contentLeft'] {
    width: 50%;
    height: 100%;
    padding: 12px 16px 12px 0;
    overflow-y: auto;
    [class='menuName'] {
      padding: 8px 10px;
      &:hover {
        background: #082f4a;
        cursor: pointer;
      }
    }
  }
}
